<template>
    <!-- 三维地图组件 -->
    <div class="map-3d">
        <div class="map-container" :id="mapId"></div>
    </div>
</template>
<script setup>
import { onMounted, onUnmounted, inject } from 'vue'
const mars3d = inject('mars3d')
import { defineEmits } from 'vue'
const emit = defineEmits(['MapLoadSuccess'])
const props = defineProps({
    /**
     * 地图容器ID
     */
    mapId: {
        type: String,
        required: true,
        default: 'mapContainer'
    },
    /**
     * 地图中心点
     */
    center: {
        type: Object,
        required: false,
        default: () => {
            return {
                lat: 30.054604,
                lng: 108.885436,
                alt: 17036414,
                heading: 0,
                pitch: -90
            }
        }
    },
    /**
     * 地图底图
     */
    basemaps: {
        type: Array,
        required: false,
        default: () => {
            return [
                {
                    name: '天地图影像',
                    type: 'tdt',
                    layer: 'img_d',
                    show: true
                }
            ]
        }
    },
    /**
     * 地形
     */
    terrain: {
        type: Object,
        required: false,
        default: () => {
            return {
                url: '//data.mars3d.cn/terrain',
                show: true
            }
        }
    }
})
// 地图对象
let map = null
onMounted(() => {
    initMap()
})
onUnmounted(() => {
    distoryMap()
})
/**
 * 初始化地图
 */
const initMap = () => {
    // 创建三维地球场景
    map = new mars3d.Map(props.mapId ? props.mapId : 'mapContainer', {
        scene: {
            center: props.center
        },
        control: {
            baseLayerPicker: false, // basemaps底图切换按钮
            homeButton: false, // 视角复位按钮
            sceneModePicker: false, // 二三维切换按钮
            navigationHelpButton: false, // 帮助按钮
            fullscreenButton: false, // 全屏按钮
            contextmenu: { hasDefault: true } // 右键菜单
        },
        terrain: props.terrain,
        basemaps: props.basemaps
    })
    emit('MapLoadSuccess', map)
}
/**
 * 卸载地图
 */
const distoryMap = () => {
    if (map) {
        map.destroy()
        map = null
    }
}
</script>
<style lang="scss" scoped>
.map-3d {
    @include box-flex($width: 100%, $height: 100%, $direction: column, $justify: center, $align: center);
    .map-container {
        @include box-flex($width: 100%, $height: 100%, $direction: column, $justify: center, $align: center);
    }
}
</style>
